「ホームページのデザインを工夫してみたのに、どうしてもカッコよくならない」「かわいい素材を借りてきたのに、なんとなく浮いちゃって見える…」そんな経験、ありませんか?
こちらのコーナーでは、フリー素材を使ってクールなデザインのホームページを作るコツをご説明していきます。



I. 壁紙か、アイコン・カットか、どちらかに絞る

柄の入った壁紙の上に、更にグラフィカルなボタンやアイコンを配置してしまうと、どうしてもページにまとまりが無くなります。
「柄の入った壁紙を使うなら、リンクは文字だけのボタンや、いっそテキストリンクにする」「アイコンなども、シンプルなものにする」
「華やかな絵入りのボタンやアイコンを使ったり、カットを配置するのであれば、壁紙は使わない。もしくはごくシンプルな模様のものにする」
このどちらかにすれば、たとえ派手な素材画像を使っても、ページがすっきりとした印象になります。

もし、どうしても「壁紙も、大きいボタンも使いたい」ということなら、セット素材を使うか、各素材画像の色を統一するかして統一感を持たせれば、キレイにレイアウトすることも可能です。





II. 背景色は、白か黒にする

ただし、I.の「壁紙は使わず、絵入りのボタンやアイコンを使う」レイアウトの場合です。

素材屋さんの素材は、白か黒色の背景の上に置くことを前提にしてアイコンなどの素材を制作していることが多いです。特に「白背景用」と書いていなくても、白い背景ページで展示しているのは薄い背景色、黒い背景ページで展示しているのは、濃い背景色に合うように作ってある素材だと考えていいと思います。
わざわざ、似合わない背景色のページで自分の素材を公開している素材屋さんなんて、ちょっといないと思いますから!

透過GIFで、何色の背景にも使えるように、シンプルに作ってある素材も、もちろんあります。ですが、グラフィカルなアイコンやボタンになると、どうしても「薄い背景色の上ではキレイだけど、濃い背景に置くと浮いてしまう画像」や、逆に「黒い背景色に映える画像」など、「合う配色と合わない配色」が出来てきます。
ご自分のカラーコーディネイトのセンスに自信のある方なら、たくさんの素材の中から中間色の背景に合う素材をセレクトすることも可能だと思います。ですが、「ちょっと自信ない……」「探すの大変そう」と思う方は、グラフィカルな素材を使うときは、素材屋さんが最初から「白背景用」「黒背景用」に作った素材を使って、白背景or黒背景のページを作るのが、手軽で失敗も少ないと思います。






III. 色数は、「背景の色+2〜3色」程度にする

たとえば、このページは「白(背景) + グレー(文字) + ピンク(画面左) + 赤(見出し、リンク色)」の、「モノトーン+2色」でデザインしています。
1つのページ内で使われる色の数がこの程度なら、自然にスッキリした印象のページになります。
たくさんの色を使えば使うほど、キレイなレイアウトをするのにテクニックが必要になります。

また、サイト全体を通して同じ配色を使うようにすれば、統一感のある洗練された印象のサイトを作ることができます。

* HOME *

Copyright (C) 2002-2003 ISR all rights reserved.